<!--
  Created by IntelliJ IDEA.
  UserManage: Dai
  Date: 2018/4/3
  Time: 9:40
  To change this template use File | Settings | File Templates.
-->
<!DOCTYPE html>
<html lang="en" layout:decorate="~{default/just_css_and_js}" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <style>
        /*这个页面上的表格的样式*/
        .th-inner {
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            padding: 0 !important;
            /* background-image: none; */
            background-color: white;
            border: 0 !important;
        }

        table {
            border: 0 !important;
        }

        tr {
            border: 0 !important;
        }

        /*实时监控 电池包总览 行转列只能用div做了*/
        .div-like-form .div-left div { /*每一列的div的属性*/
            padding: 5px 15px;
        }

        .div-like-form .div-left { /*每一列的属性*/
            float: left;
            text-align: center;
        }

        .div-like-form .div-left .name { /*名称栏变成灰色*/
            background-color: #c2c2c2;
        }

        label.col-sm-6 {
            padding: 0;
        }

        .change {
            border: 1px solid rgb(181, 181, 181) !important;
            padding: 6px !important;
            margin-top: 3px;
            margin-bottom: 3px;
        }

        input[readonly] {
            background-color: inherit !important;
        }
    </style>
    <!-- datepicker 时间选择器 -->
    <script src="/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        /**
         * 限制开始时间和结束时间不能互相超过
         */
        $(function () {
            $("#start_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                format: "yyyy-mm-dd",
                minView: "month",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                showMeridian: true,
                autoclose: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var starttime = $("#start_time_select").val();
                $("#end_time_select").datetimepicker('setStartDate', starttime);
                change_data_type_of_date();
            });
            $("#end_time_select").datetimepicker({
                bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
                startView: 2,
                minView: "month",
                format: "yyyy-mm-dd",
                todayBtn: "linked",
                todayHighlight: true,
                language: "zh-CN",
                autoclose: true,
                showMeridian: true,
                endDate: new Date()
            }).on('changeDate', function (ev) {
                var endtime = $("#end_time_select").val();
                $("#start_time_select").datetimepicker('setEndDate', endtime);
                change_data_type_of_date();
            });
        });

        /**
         * 根据自定义的天数决定是否显示小时
         */
        function change_data_type_of_date() {
            var starttime = $("#start_time_select").val();
            var endtime = $("#end_time_select").val();
            $("#data_freque").empty();
            var str = "";
            var cha = GetDateDiff(starttime, endtime);
            if (cha > 8) {
                str = '<button type="button" class="btn btn-choose-red active">日</button>';
            } else {
                str = '<button type="button" class="btn btn-choose-red active">日</button><button type="button" class="btn btn-choose-red">小时</button>';
            }
            $("#data_freque").prepend(str);
            change_data_type($(this));
            $('#data_freque button').click(function (e) {
                change_data_type($(this));
            });
        }

        /**
         * 计算两个日期之间的相距天数
         */
        function GetDateDiff(starttime, endtime) {
            var startTime = new Date(Date.parse(starttime.replace(/-/g, "/"))).getTime();
            var endTime = new Date(Date.parse(endtime.replace(/-/g, "/"))).getTime();
            var dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
            return dates;
        }
    </script>
    <!--图表-->
    <script>
        /**
         * 图表
         */
        $(function () {
            /**
             * 实时数据 - 单体电压/温度 排名  柱状图
             */
            top_and_bottom();
            /**
             * 实时监控 - 电压/电流/SOC  今日曲线
             */
            today_line();
            /**
             * 实时监控 - 电压/温度 今日极值/极差曲线
             */
            today_bar();
            /**
             * 更改 实时监控 模组监控 div 宽度
             */
            change_model_monitor_div_width();
            /**
             * 历史数据中的图表
             */
            $("#search_history").css("width", $("#default-step-0").width());
            btn_choose_red();
            /**
             * 诊断分析 SOC校正及单体SOC分布
             */
            $("#soc_correcting").css("width", $("#soc_correcting").prev().width());
            soc_correcting();
            /**
             * 诊断分析 单体阻值分布
             */
            $("#dcir_correcting").css("width", $("#dcir_correcting").prev().width());
            dcir_correcting();
        });

        /**
         * 实时数据 - 单体电压/温度 排名 柱状图
         */
        function top_and_bottom() {
            $("#top_and_bottom").css("width", $("#table_or_bar").parent().width());
            var top_and_bottom = echarts.init(document.getElementById('top_and_bottom'));
            $.post("/monitor/get_top_and_bottom", {id: $("#id").val()}, function (map) {
                var sortedKeys = Object.keys(map.voltage).sort(function (a, b) {
                    return map.voltage[a] - map.voltage[b];
                });
                var bottom5 = sortedKeys.slice(0, 5);
                var top5 = sortedKeys.slice(sortedKeys.length - 5);
                console.log(top5);
                var tableData = [];
                for (var i = 0; i < 5; i++) {
                    tableData.push({
                        "top_name": top5[i], "top_value": map.voltage[top5[i]],
                        "bottom_name": bottom5[i], "bottom_value": map.voltage[bottom5[i]]
                    });
                }
                $("#voltage").bootstrapTable({
                    queryParamsType: "undefined",
                    columns: [
                        {
                            field: 'top_value',
                            title: '电压(mV)',
                            formatter: function (value, row, index) {
                                return value;
                            }
                        },
                        {
                            field: 'top_name',
                            title: '单体'
                        },
                        {
                            field: 'bottom_value',
                            title: '电压(mV)',
                            formatter: function (value, row, index) {
                                return value;
                            }
                        },
                        {
                            field: 'bottom_name',
                            title: '单体'
                        }
                    ],
                    data: tableData
                });

                top_and_bottom.setOption({
                    title: [{
                        text: "电压最高",
                        x: '2%',
                        y: '0%',
                        textStyle: {
                            fontSize: "14"
                        }
                    },
                        {
                            text: "电压最低",
                            x: '52%',
                            y: '0%',
                            textStyle: {
                                fontSize: "14"
                            }
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: [
                        {
                            x: '0%',
                            y: '12%',
                            width: '45%',
                            height: '90%',
                            containLabel: true
                        },
                        {
                            x: '50%',
                            y: '12%',
                            width: '45%',
                            height: '90%',
                            containLabel: true
                        }
                    ],
                    xAxis: [
                        {
                            gridIndex: 0,
                            type: 'value',
                            show: false,
                            splitLine: {    //不显示坐标辅助线
                                show: false
                            }
                        },
                        {
                            gridIndex: 1,
                            type: 'value',
                            show: false,
                            splitLine: {    //不显示坐标辅助线
                                show: false
                            }
                        }

                    ],
                    yAxis: [
                        {
                            gridIndex: 0,
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: top5
                        },
                        {
                            gridIndex: 1,
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: bottom5
                        }
                    ],
                    series: [
                        {
                            name: "电压最高5",
                            type: 'bar',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            data: top5.map(function (key) {
                                return map.voltage[key];
                            })
                        }, {
                            name: "电压最低5",
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: bottom5.map(function (key) {
                                return map.voltage[key];
                            })
                        }
                    ]
                });
                // 单体电压/温度 排名 隐藏柱状图
                $("#top_and_bottom").hide();
            });
        }

        /**
         * 实时监控 - 电压/电流/SOC  今日曲线
         */
        function today_line() {
            var today_line = echarts.init(document.getElementById('today_line'));
            today_line.setOption({
                title: {                // 标题
                    left: 'center',
                    text: '电压/SOC  今日曲线'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'     // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: ['电压', 'SOC'],
                    x: 'center',        //中间
                    y: '10%',           //下方
                    selectedMode: false  //取消图例上的点击事件
                },
                toolbox: [
                    {              // 工具栏
                        show: true,
                        feature: {
                            dataView: {readOnly: false},        //数据视图
                            magicType: {type: ['line', 'bar']}, //变换类型
                            restore: {},                        //刷新
                            saveAsImage: {}                     //保存图片
                        }
                    }
                    // ,
                    // {
                    //     show: true,
                    //     x: '3%',
                    //     feature: {
                    //         myTool1: {
                    //             show: true,
                    //             title: '电压/电流',
                    //             icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    //             onclick: function () {
                    //                 //TODO 这边是切换电压电流的按钮
                    //             }
                    //         }
                    //     }
                    // }
                ],
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: false,  //坐标轴两边留白，如果是false就是0点在y轴上
                    axisLabel: {
                        formatter: function (data) {
                            return data.split(" ")[1];
                        }
                    }
                },
                yAxis: [
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '电压(V)',
                        type: 'value',
                        boundaryGap: true,
                        // min: 0,
                        max: function (value) {
                            return (value.max + 100).toFixed(0);
                        }
                    },
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: 'SOC',
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '电压',
                        type: 'line',
                        data: []
                    },
                    {
                        name: 'SOC',
                        type: 'line',
                        yAxisIndex: 1,  //使用第二个Y轴
                        data: []
                    }
                ]
            });
            today_line.showLoading();
            $.post("/monitor/get_today_line", {id: $("#id").val()}, function (map) {
                today_line.hideLoading();
                if (map != null) {
                    today_line.setOption(
                        {
                            xAxis: {
                                data: Object.keys(map).sort()
                            },
                            series: [
                                {
                                    name: '电压',
                                    data: Object.keys(map).sort().map(function (key) {
                                        return map[key]["BatVoltage"];
                                    })
                                }, {
                                    name: 'SOC',
                                    data: Object.keys(map).sort().map(function (key) {
                                        return map[key]["Soc"];
                                    })
                                }
                            ]
                        }
                    );
                }
            });
        }

        /**
         * 实时监控 - 电压/温度 今日极值/极差曲线
         */
        function today_bar() {
            var today_bar = echarts.init(document.getElementById('today_bar'));
            today_bar.setOption({
                title: {                // 标题
                    left: 'center',
                    text: '电压/温度 今日极值/极差曲线'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '3%',
                    bottom: '10%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis',    // 触发类型 axis坐标轴触发
                    formatter: function (params) {
                        var length = params.length;
                        var value1 = Number(params[0].value) + Number(params[1].value);
                        var value2 = Number(params[2].value) + Number(params[3].value);
                        var str = params[0].name + "<br>";
                        str += params[0].seriesName + ":&nbsp;" + params[0].value + "<br>";
                        str += "单体电压最高(V):&nbsp;" + value1.toFixed(2) + "<br>";
                        str += params[1].seriesName + ":&nbsp;" + params[1].value + "<br>";
                        str += params[2].seriesName + ":&nbsp;" + params[2].value + "<br>";
                        str += "单体温度最高(℃):&nbsp;" + value2.toFixed(2) + "<br>";
                        str += params[3].seriesName + ":&nbsp;" + params[3].value + "<br>";
                        return str;
                    }
                },
                legend: {               // 图例
                    data: ['单体电压最低(V)', '单体电压极差(V)', '单体温度最低(℃)', '单体温度极差(℃)'],
                    x: 'center',        //中间
                    y: '10%',           //下方
                    selectedMode: true  //取消图例上的点击事件
                },
                toolbox: [
                    {              // 工具栏
                        show: true,
                        top: '3%',
                        feature: {
                            dataView: {readOnly: false},        //数据视图
                            magicType: {type: ['line', 'bar']}, //变换类型
                            restore: {},                        //刷新
                            saveAsImage: {}                     //保存图片
                        }
                    },
                    {
                        show: true,
                        x: '3%',
                        feature: {
                            myTool1: {
                                show: true,
                                title: '电压/电流',
                                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                                onclick: function () {
                                    //TODO 这边是切换电压电流的按钮
                                }
                            }
                        }
                    }
                ],
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白
                    data: []
                },
                yAxis: [
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '电压',
                        type: 'value',
                        boundaryGap: true
                    },
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '温度',
                        type: 'value',
                        //min: 0,
                        //max: 100,
                        axisLabel: {
                            formatter: '{value} ℃'
                        }
                    }
                ],
                series: [
                    {
                        name: '单体电压最低(V)',
                        type: 'bar',
                        stack: '电压(V)',
                        color: '#F7E2A6',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    },
                    {
                        name: '单体电压极差(V)',
                        type: 'bar',
                        stack: '电压(V)',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    },
                    {
                        name: '单体温度最低(℃)',
                        type: 'bar',
                        stack: '温度',
                        color: '#DAF7A6',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    }
                    ,
                    {
                        name: '单体温度极差(℃)',
                        type: 'bar',
                        stack: '温度',
                        barMaxWidth: 30,//最大宽度
                        data: []
                    }
                ]
            });
            today_bar.showLoading();
            $.post("/monitor/get_today_bar", {id: $("#id").val()}, function (map) {
                today_bar.hideLoading();
                if (map != null) {
                    today_bar.setOption(
                        {
                            xAxis: {
                                data: Object.keys(map).sort()
                            },
                            series: [
                                {
                                    name: '单体电压最低(V)',
                                    data: Object.keys(map).sort().map(function (key) {
                                        return (map[key][0] * 0.001).toFixed(2);
                                    })
                                }, {
                                    name: '单体电压极差(V)',
                                    data: Object.keys(map).sort().map(function (key) {
                                        return (map[key][1] * 0.001).toFixed(2);
                                    })
                                }, {
                                    name: '单体温度最低(℃)',
                                    yAxisIndex: 1,
                                    data: Object.keys(map).sort().map(function (key) {
                                        return map[key][2].toFixed(2);
                                    })
                                }, {
                                    name: '单体温度极差(℃)',
                                    yAxisIndex: 1,
                                    data: Object.keys(map).sort().map(function (key) {
                                        //alert("单体温度极差  :"+map[key][3].toFixed(2));
                                        return map[key][3].toFixed(2);
                                    })
                                }
                            ]
                        }
                    );
                }
            });
        }

        /**
         * 诊断分析 SOC校正及单体SOC分布
         */
        function soc_correcting() {
            var soc_correcting = echarts.init(document.getElementById('soc_correcting'));
            soc_correcting.setOption({
                title: {                // 标题
                    left: 'center',
                    y: '80%',
                    text: '单体SOC 频率/频数分布图'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '2%',
                    bottom: '25%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {
                    trigger: "axis",          // 提示框组件
                    formatter: function (params) {
                        var str = params[0].seriesName + ":&nbsp;" + params[0].value + "<br/>";
                        str += params[1].seriesName + ":&nbsp;" + params[1].value * 100 + "% <br/>";
                        return str;
                    }
                },
                legend: {               // 图例
                    data: ['频数', '频率'],
                    show: false
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: []
                },
                yAxis: [
                    {
                        name: '频数',
                        type: 'value',
                        boundaryGap: true,
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    },
                    {
                        name: '频率',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: 1,
                        axisLabel: {
                            formatter: function (value, index) {
                                return (value * 100).toFixed(2) + '%';
                            }
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    }
                ],
                series: [
                    {
                        name: '频数',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '频率',
                        type: 'bar',
                        barWidth:50,
                        yAxisIndex: 1,
                        data: []
                    }
                ]
            });
            $.post("/monitor/soc_correcting", {id: $("#id").val()}, function (json) {
                // 1. 设置图表
                soc_correcting.setOption({
                    xAxis: {
                        data: Object.keys(json.data).sort(function (a, b) {
                            return a[0] - b[0]
                        })
                    },
                    series: [
                        {
                            name: '频数',
                            data: Object.keys(json.data).sort(function (a, b) {
                                return a[0] - b[0]
                            }).map(function (key) {
                                return json.data[key]["count"];
                            })
                        },
                        {
                            name: '频率',
                            data: Object.keys(json.data).sort(function (a, b) {
                                return a[0] - b[0]
                            }).map(function (key) {
                                return json.data[key]["percent"];
                            })
                        }
                    ]
                });
                // 2. 设置更新的值
                $("#soc_correcting").parent().find("span.time_value").text(json.time_value);
                $("#soc_correcting").parent().find("span.value").text(json.value);
                $("#soc_correcting").parent().find("span.change_value").text(json.change_value);
                $("#soc_correcting").parent().find("span.offset_value").text(json.offset_value);
                $("#soc_correcting").parent().find("span.offset_change_value").text(json.offset_change_value);
                if (json.change_value < 0) {
                    $("#soc_correcting").parent().find(".change_value_arrow").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down").css("color", "green");
                } else {
                    $("#soc_correcting").parent().find(".change_value_arrow").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up").css("color", "red");
                }
                if (json.offset_change_value < 0) {
                    $("#soc_correcting").parent().find(".offset_change_arrow").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down").css("color", "green");
                } else {
                    $("#soc_correcting").parent().find(".offset_change_arrow").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up").css("color", "red");
                }
            })
        }

        /**
         * 诊断分析 单体阻值分布
         */
        function dcir_correcting() {
            var dcir_correcting = echarts.init(document.getElementById('dcir_correcting'));
            dcir_correcting.setOption({
                title: {                // 标题
                    left: 'center',
                    y: '80%',
                    text: '单体阻值频数/频率分布图'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '2%',
                    bottom: '25%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: "axis",          // 提示框组件
                    formatter: function (params) {
                        var str = params[0].seriesName + ":&nbsp;" + params[0].value + "<br/>";
                        str += params[1].seriesName + ":&nbsp;" + params[1].value * 100 + "% <br/>";
                        return str;
                    }
                },
                legend: {               // 图例
                    data: ['频数', '频率'],
                    show: false
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: []
                },
                yAxis: [
                    {
                        name: '频数',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    },
                    {
                        name: '频率',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: 1,
                        axisLabel: {
                            formatter: function (value, index) {
                                return (value * 100).toFixed(2) + '%';
                            }
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    }
                ],
                series: [
                    {
                        name: '频数',
                        type: 'line',
                        data: []
                    },
                    {
                        name: '频率',
                        type: 'bar',
                        barWidth:50,
                        yAxisIndex: 1,  // 使用第二个Y轴
                        data: []
                    }
                ]
            });
            $.post("/monitor/dcir_correcting", {id: $("#id").val()}, function (json) {
                // 1. 设置图表
                dcir_correcting.setOption({
                    xAxis: {
                        data: Object.keys(json.data).sort(function (a, b) {
                            return a[0] - b[0]
                        })
                    },
                    series: [
                        {
                            name: '频数',
                            data: Object.keys(json.data).sort().map(function (key) {
                                return json.data[key]["count"];
                            })
                        },
                        {
                            name: '频率',
                            data: Object.keys(json.data).sort().map(function (key) {
                                return json.data[key]["percent"];
                            })
                        }
                    ]
                });
                // 2. 设置更新的值
                $("#dcir_correcting").parent().find("span.time_value").text(json.time_value);
            })
        }
    </script>
    <!--页面上的一些js-->
    <script>
        /**
         * 历史查询中的button
         */
        var str_1 =
            '<button type="button" class="btn btn-choose-red active" name="replace_name" value="replace_value">replace_this</button>';
        var str_other =
            '<button type="button" class="btn btn-choose-red" name="replace_name" value="replace_value">replace_this</button>';

        /**
         * 点击切换tab页面
         * @param e
         */
        function changeTab(e) {
            // 1. 切换活跃状态
            $(e).parent().siblings().removeClass("active");
            $(e).parent().addClass("active");
            // 2. 根据id显示页面
            var id = $(e).attr("id").replace("title", "step");
            $("#" + id).siblings().hide();
            $("#" + id).show();
//            if (id == "default-step-0"){
//                interval = setInterval("refresh()", 10000);
//            } else {
//                clearInterval(interval);
//            }
        }

        //        /**
        //         * 定时任务
        //         */
        //        var interval;
        //        function refresh(){
        //            var frame = window.parent.document.getElementById("iframe");
        //            var path = frame.getAttribute("src");
        //            frame.setAttribute("src", path);
        //        }


        /**
         * 实时数据 中的 温度/电压排名 中的 表格的table字段格式
         */

        /**
         * 初始化table

         window.onload = function () {
            var id = $("#id").val();
            $("#voltage").bootstrapTable({
                queryParamsType: "undefined",
                columns: voltage_data_format,
                url: "/monitor/get_voltage_data?id=" + id
            });
            $("#temperature").bootstrapTable({
                queryParamsType: "undefined",
                columns: temperature_data_format,
                url: "/monitor/get_temperature_data?id=" + id
            });
        };
         */
        /**
         * 实时数据 -> 单体电压/温度 排名
         * 点击 表格<>柱状图 按钮 切换表格和抓状图的显示
         */
        function table_or_bar() {
            $("#top_and_bottom").toggle();
            $("#top_and_bottom").prev().toggle();
        }

        /**
         * 初始化页面
         */
        $(function () {
            /**
             * 除了第一个其他的页面都不显示
             */
            $("#default-step-0").show().siblings().hide();
            /**
             * 历史数据 自定义时间的选择框先隐藏掉
             */
            $("#time_select").hide();
            /**
             * 按钮点击事件
             */
            button_click();
            /**
             * 隐藏所有提示
             */
            $(".prompt").hide();
            /**
             * 绑定台账信息的修改页面的input框的样式修改
             */
            input_on_focus();
            //定时任务
            //interval = setInterval("refresh()", 10000);
        });


        /**
         * 更改 实时监控 模组监控 div 宽度
         */
        function change_model_monitor_div_width() {
            var father_width = $(".div-like-form").width();
            var first_width = $(".div-left:first").width();
            var size = $(".div-like-form .div-left").size() - 1;
            var width = 150;
            if (size <= 5) {
                width = (father_width - first_width) / size - 1;
                $(".div-like-form .div-left").each(function (index) {
                    if (index != 0) {
                        $(this).css("width", width);
                    }
                });
            } else {
                $(".div-like-form .div-left").each(function (index) {
                    if (index != 0) {
                        $(this).css("width", width);
                    }
                });
            }
            $(".div-like-form").css("width", width * size + first_width);
            $("#package_info").css("width", width * size);
            $(window).trigger("package_info_resize");
        }

        /**
         * 历史数据 按钮点击事件
         * 这边还是写个逻辑吧：
         * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
         * 点击 测点名称 -> 发送请求更改显示图表
         * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 点击 显示类别 -> 发送请求更改显示图表
         */
        function button_click() {
            /**
             * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
             */
            $('button[name="objType"]').click(function (e) {
                change_test_name($(this));
            });
            /**
             * 点击 测点名称 -> 发送请求更改显示图表
             * 1. 更改按钮显示
             * 2. 发送请求更改显示图表
             */
            $('button[name="name"]').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            /**
             * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
             */
            $('button[name="ranges"]').click(function (e) {
                change_data_freque($(this));
            });
            /**
             * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
             */
            $('button[name="freque"]').click(function (e) {
                change_data_type($(this));
            });
            /**
             * 点击 显示类别 -> 发送请求更改显示图表
             * 1. 更改按钮显示
             * 2. 发送请求更改显示图表
             */
            $('button[name="show_type"]').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
        }

        /**
         * 点击 测点类别 -> 更改 测点名称 -> 发送请求更改显示图表
         * 1. 更改 测点名称
         *      1)  更改按钮显示
         *      2)  更改测点名称
         *      3)  绑定测点名称单击事件
         * 2. 发送请求更改显示图表
         */
        function change_test_name(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改测点名称
            var text = $(button).text();
            $("#history_name").empty();
            var str = "";
            switch (text) {
                case "能量":
                    str = str_1.replace("replace_this", "可储存电量").replace("replace_name", "name").replace("replace_value", "可储存电量")
                        + str_other.replace("replace_this", "总电量").replace("replace_name", "name").replace("replace_value", "总电量")
                    break;
                case "电压":
                    str = str_1.replace("replace_this", "总电压").replace("replace_name", "name").replace("replace_value", "总电压")
                        + str_other.replace("replace_this", "单体电压极值和极差").replace("replace_name", "name").replace("replace_value", "单体电压极值和极差");
                    break;
                case "电流":
                    str = str_1.replace("replace_this", "电流").replace("replace_name", "name").replace("replace_value", "电流");
                    break;
                case "温度":
                    str = /*str_1.replace("replace_this", "温度").replace("replace_name", "name").replace("replace_value", "温度")
                        + */str_1.replace("replace_this", "单体温度极值和极差").replace("replace_name", "name").replace("replace_value", "单体温度极值和极差");
                    break;
                case "SOC":
                    str = str_1.replace("replace_this", "SOC").replace("replace_name", "name").replace("replace_value", "SOC");
                    break;
                case "循环次数":
                    str = str_1.replace("replace_this", "循环次数").replace("replace_name", "name").replace("replace_value", "循环次数");
                    break;
            }
            $("#history_name").prepend(str);
            // 3)  绑定测点名称单击事件
            $('button[name="name"]').click(function (e) {
                /**
                 * 点击 测点名称 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 点击 时间范围 -> 更改 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示密度
         *      1)  更改按钮显示
         *      2)  更改显示密度
         *      3)  绑定显示密度单击事件
         * 2. 更改 显示类别 -> 发送请求更改显示图表
         */
        function change_data_freque(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示密度
            var text = $(button).text();
            $("#history_freque").empty();
            var str = "";
            switch (text) {
                case "日":
                    str = str_1.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour")
                        + str_other.replace("replace_this", "15分钟").replace("replace_name", "freque").replace("replace_value", "15");
                    $("#time_select").hide();
                    break;
                case "周":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").hide();
                    break;
                case "月":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day");
                    $("#time_select").hide();
                    break;
                case "年":
                    str = str_1.replace("replace_this", "月").replace("replace_name", "freque").replace("replace_value", "month");
                    $("#time_select").hide();
                    break;
                case "自定义":
                    str = str_1.replace("replace_this", "日").replace("replace_name", "freque").replace("replace_value", "day")
                        + str_other.replace("replace_this", "小时").replace("replace_name", "freque").replace("replace_value", "hour");
                    $("#time_select").show();
                    break;
            }
            $("#history_freque").prepend(str);
            // 3)  绑定显示密度单击事件
            $('button[name="freque"]').click(function (e) {
                /**
                 * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
                 */
                change_data_type($(this));
            });
            // 2. 更改 显示类别 -> 发送请求更改显示图表
            change_data_type($(this));
        }

        /**
         * 点击 显示密度 -> 更改 显示类别 -> 发送请求更改显示图表
         * 1. 更改 显示类别
         *      1)  更改按钮显示
         *      2)  更改显示类别
         *      3)  绑定显示类别单击事件
         * 2. 发送请求更改显示图表
         */
        function change_data_type(button) {
            // 1)  更改按钮显示
            $(button).addClass('active').siblings().removeClass('active');
            // 2)  更改显示类别
            var text = $(button).text();
            if (text == '15分钟') {
                $("#history_show_type").empty();
                $("#history_show_type").prepend(str_1.replace("replace_this", "瞬态值").replace("replace_name", "show_type").replace("replace_value", "now"));
            } else {
                if ($("#history_show_type").children().size() != 3) {
                    var str = str_1.replace("replace_this", "平均值").replace("replace_name", "show_type").replace("replace_value", "avg")
                        + str_other.replace("replace_this", "最大值").replace("replace_name", "show_type").replace("replace_value", "max")
                        + str_other.replace("replace_this", "最小值").replace("replace_name", "show_type").replace("replace_value", "min");
                    $("#history_show_type").empty();
                    $("#history_show_type").prepend(str);
                }
            }
            // 3)  绑定显示类别单击事件
            $('button[name="show_type"]').click(function (e) {
                /**
                 * 点击 显示类别 -> 发送请求更改显示图表
                 * 1. 更改按钮显示
                 * 2. 发送请求更改显示图表
                 */
                $(this).addClass('active').siblings().removeClass('active');
                // 发送请求更改图表
                btn_choose_red();
            });
            // 2. 发送请求更改显示图表
            btn_choose_red();
        }

        /**
         * 发送请求更改显示图表
         * 1. 预设图表
         * 2. 获取请求数据
         * 3. 发送请求并获取返回值设置图表
         */
        function btn_choose_red() {
            // 1. 获取请求数据
            var objType, name, ranges, freque, show_type, start_time = null, end_time = null;
            $("button.active").each(function (i, v) {
                var title = $(v).attr("name");
                switch (title) {
                    case "objType":
                        objType = $(v).val();
                        break;
                    case "name":
                        name = $(v).val();
                        break;
                    case "ranges":
                        ranges = $(v).val();
                        break;
                    case "freque":
                        freque = $(v).val();
                        break;
                    case "show_type":
                        show_type = $(v).val();
                        break;
                }
            });
            if (ranges == "custom") {
                start_time = $("#start_time").val();
                if (start_time == "") {
                    return false;
                }
                end_time = $("#end_time").val();
                if (end_time == "") {
                    return false;
                }
            }
            // 3. 发送请求并获取返回值设置图表
            $.post("/monitor/history_data_equipment",
                {
                    id: $("#id").val(),
                    objType: objType,
                    name: name,
                    ranges: ranges,
                    freque: freque,
                    show_type: show_type,
                    start_time: start_time,
                    end_time: end_time,
                    type: "package"
                },
                function (map) {
                    // 2. 预设图表
                    var history = echarts.init(document.getElementById('search_history'));
                    var options = {
                        title: {                // 标题
                            left: 'center',
                            text: map.title,
                            top: '3%',
                            text: ""
                        },
                        grid: {                 // 设置边距
                            left: '0%',
                            right: '3%',
                            bottom: '10%',
                            containLabel: true  // 是否包含显示的刻度
                        },
                        tooltip: {              // 提示框组件
                            trigger: 'axis'     // 触发类型 axis坐标轴触发
                        },
                        legend: {               // 图例
                            data: [],
                            x: 'center',        //中间
                            y: 'bottom'         //下方
                        },
                        toolbox: {              // 工具栏
                            show: true,
                            top: '3%',
                            feature: {
                                dataView: {readOnly: false},        //数据视图
                                magicType: {type: ['line', 'bar']}, //变换类型
                                restore: {},                        //刷新
                                saveAsImage: {}                     //保存图片
                            }
                        },
                        xAxis: {                // x轴
                            type: 'category',
                            boundaryGap: false,  //坐标轴两边留白，如果是false就是0点在y轴上
                            data: Object.keys(map).filter(function (key) {
                                return key !== "title";

                            }).sort()
                        },
                        yAxis: [
                            {
                                type: 'value',
                                boundaryGap: true
                            }
                        ],
                        series: [
                            {
                                name: name,
                                type: 'line',
                                data: Object.keys(map).filter(function (key) {
                                    return key !== "title";

                                }).sort().map(function (key) {
                                    return map[key];
                                })
                            }
                        ]
                    };
                    // 2. 如果有值的话就放进去
                    history.setOption(options, true);
                    switch (name) {
                        case "单体电压极值和极差":
                            history.setOption({
                                series: [
                                    {
                                        name: '最小值',
                                        type: 'line',
                                        data: Object.keys(map).filter(function (key) {
                                            return key !== "title";

                                        }).sort().map(function (key) {
                                            return map[key]["MinCellVolt"];
                                        })
                                    },
                                    {
                                        name: '极差',
                                        type: 'line',
                                        data: Object.keys(map).filter(function (key) {
                                            return key !== "title";

                                        }).sort().map(function (key) {
                                            return (map[key]["MaxCellVolt"] - map[key]["MinCellVolt"]).toFixed(2);
                                        })
                                    }
                                ]
                            });
                            break;
                        case "单体温度极值和极差":
                            history.setOption({
                                series: [
                                    {
                                        name: '最小值',
                                        type: 'line',
                                        data: Object.keys(map).filter(function (key) {
                                            return key !== "title";

                                        }).sort().map(function (key) {
                                            return map[key]["MinTemp"];
                                        })
                                    },
                                    {
                                        name: '极差',
                                        type: 'line',
                                        data: Object.keys(map).filter(function (key) {
                                            return key !== "title";

                                        }).sort().map(function (key) {
                                            return (map[key]["MaxTemp"] - map[key]["MinTemp"]).toFixed(2);
                                        })
                                    }
                                ]
                            });
                            break;
                    }

                }
            );
        }

        /**
         * 诊断分析 总电量 显示提示
         */
        function show_next_prompt(div) {
            $(div).next().show();
        }

        /**
         * 绑定台账信息的修改页面的input框的样式修改
         */
        function input_on_focus() {
            $("#save_change").hide();
            $("#default-step-2").find("input").on("click", function () {
                $("#default-step-2").find("input").addClass("change");
                $("#default-step-2").find("input[readonly]").removeClass("change");
            });
            $("#default-step-2").find("input").on("change", function () {
                $("#save_change").show();
            });
        }

        /**
         * 诊断分析 - 刷新数据
         */
        function refresh_this_value(name, button) {
            $.post("refresh_this_value",
                {id: $("#id").val(), name: name},
                function (jsonObject) {
                    $(button).closest("div").find(".value").text(jsonObject.value);
                    var change_value = jsonObject.change_value;
                    if (change_value > 0) {
                        $(button).closest("div").find(".glyphicon-arrow-down").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up").css("color", "red");
                    } else {
                        $(button).closest("div").find(".glyphicon-arrow-up").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down").css("color", "green");
                    }
                    if (change_value.startsWith("-")) {
                        change_value = change_value.toString().replace("-", "");
                    }
                    $(button).closest("div").find(".change_value").text(change_value);
                    if (jsonObject.date) {
                        var date = new Date(jsonObject.date);
                        var datetimeType = date.getFullYear() + "-" + date.getMonth(date) + "-" + date.getDay(date) + " " + date.getHours(date) + ":" + date.getMinutes(date) + ":" + date.getSeconds(date);
                        $(button).closest("div").next().find(".time_value").text(datetimeType);
                    }
                }
            );
        }
    </script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div layout:fragment="content">
    <div class="main-content-inner">
        <input type="hidden" id="id" th:value="${equipmentManage.id}">
        <!--面包屑导航栏-->
        <ul class="breadcrumb">
            <li>
                <a href="#">系统监控</a>
            </li>
            <li class="active" th:text="${equipmentManage.project.name}"></li>
            <li class="active" th:text="${equipmentManage.name}"></li>
        </ul>
        <!-- 标题tab -->
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#" onclick="changeTab(this)" id="default-title-0">实时数据</a>
            </li>
            <li role="presentation"><a href="#" onclick="changeTab(this)" id="default-title-1">历史数据</a></li>
            <li role="presentation"><a href="#" onclick="changeTab(this)" id="default-title-2">设备台帐</a></li>
            <li role="presentation"><a href="#" onclick="changeTab(this)" id="default-title-3">诊断分析</a></li>
        </ul>
        <!-- 内容显示 -->
        <h1 th:text="${message}" th:if="${message!=null}" style="text-align: center;"></h1>
        <div th:if="${message==null}">
            <!--实时监控-->
            <form id="default-step-0" class="container-fluid">
                <!--电池包监控-->
                <fieldset class="col-sm-5" id="package_monitor" style="margin-right: 10px; padding-left: 7px">
                    <legend>电池包监控</legend>
                    <div style="height: 210px; overflow-x: auto">
                        <div class="col-sm-6" th:each="parameter : ${parameterInfoList}">
                            <label class="col-sm-6" th:text="${parameter.name}"></label>
                            <span class="col-sm-4"
                                  th:text="${parameter.value==null?'暂无数据':#numbers.formatDecimal({parameter.value}, 1, 2)}">
                            </span>
                            <span class="col-sm-2" th:text="${parameter.unit}"></span>
                        </div>
                    </div>
                </fieldset>
                <!--单体电压/温度 排名-->
                <fieldset style="height: 256px;">
                    <legend>单体电压/温度 排名</legend>
                    <div style="width: 100%">
                        <a style="float: right" onclick="table_or_bar()" id="table_or_bar">表格&lt;&gt;柱状图</a>
                    </div>
                    <div style="height: 200px; float: left; overflow-x: auto; width: 100%">
                        <div style="padding: 2px; width: 98%; float: left">
                            <label style="text-align: center; width: 100%">电压TOP 5/BOTTOM 5</label>
                            <table id="voltage" class="table table-condensed"></table>
                        </div>
                    </div>
                    <div id="top_and_bottom" style="height: 200px; float: left"></div>
                </fieldset>
                <!--电压/电流/SOC  今日曲线-->
                <div id="today_line" style="width: 100%;height:300px;margin-top: 10px"></div>
                <!--电压/温度 今日极值/极差曲线-->
                <div id="today_bar" style="width: 100%;height:300px;margin-top: 10px"></div>
                <!--模组监控-->
                <fieldset>
                    <legend>模组监控</legend>
                    <div style=" overflow-x: auto;height: 500px">
                        <!--表格-->
                        <div class="div-like-form" style="width: 100%;">
                            <div class="div-left" style="width: 190px">
                                <div>模组名称</div>
                                <div>电压(V)</div>
                                <!--<div>温度(℃)</div>--><!--目前单体无法对应温度-->
                                <div>
                                    <p style="color: red">单体电压极值和极差(V)</p>
                                    <!--<p style="color: blue">单体温度极值和极差(℃)</p>-->
                                </div>
                            </div>
                            <div th:each="object,stat:${equipmentManageList}">
                                <div class="div-left">
                                    <div class="name" th:text="${object.name}"></div>
                                    <div th:text="${#numbers.formatDecimal({object.volt}, 1, 2)}"></div>
                                    <!--<div th:text="${#numbers.formatDecimal({object.temp}, 1, 2)}"></div>-->
                                </div>
                            </div>
                            <!--柱状图-->
                            <div id="package_info" style="width:100%;height: 300px;"></div>
                        </div>
                    </div>
                </fieldset>
            </form>

            <!--历史查询-->
            <div id="default-step-1">
                <form style="margin-top: 10px" class="col-sm-12">
                    <div>
                        <label style="margin-right: 15px">测点类别</label>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active" name="objType" value="2">能量</button>
                            <button type="button" class="btn btn-choose-red" name="objType" value="1">电压</button>
                            <button type="button" class="btn btn-choose-red" name="objType" value="3">电流</button>
                            <button type="button" class="btn btn-choose-red" name="objType" value="4">温度</button>
                            <button type="button" class="btn btn-choose-red" name="objType" value="5">SOC</button>
                            <button type="button" class="btn btn-choose-red" name="objType" value="6">循环次数</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">测点名称</label>
                        <div id="history_name" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active" name="name" value="可储存电量">可储存电量
                            </button>
                            <button type="button" class="btn btn-choose-red" name="name" value="总电量">总电量</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">时间范围</label>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active" name="ranges" value="day">日</button>
                            <button type="button" class="btn btn-choose-red" name="ranges" value="week">周</button>
                            <button type="button" class="btn btn-choose-red" name="ranges" value="month">月</button>
                            <button type="button" class="btn btn-choose-red" name="ranges" value="year">年</button>
                            <button type="button" class="btn btn-choose-red" name="ranges" value="custom">自定义</button>
                            <div style="display: inline-block" id="time_select">
                                <input class="form_date"
                                       style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                       type="text" placeholder="开始时间"
                                       id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd"
                                       readonly>
                                <span>至</span>
                                <input class="form_date"
                                       style="height: 30px; background-color: white !important; border-radius: 5px !important"
                                       type="text" placeholder="结束时间"
                                       id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd"
                                       readonly>
                                <input type="hidden" id="start_time" name="start_time">
                                <input type="hidden" id="end_time" name="end_time">
                            </div>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">显示密度</label>
                        <div id="history_freque" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active" name="freque" value="hour">小时
                            </button>
                            <button type="button" class="btn btn-choose-red" name="freque" value="15">15分钟</button>
                        </div>
                    </div>
                    <div>
                        <label style="margin-right: 15px">显示类别</label>
                        <div id="history_show_type" class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-choose-red active" name="show_type" value="avg">平均值
                            </button>
                            <button type="button" class="btn btn-choose-red" name="show_type" value="min">最小值</button>
                            <button type="button" class="btn btn-choose-red" name="show_type" value="max">最大值</button>
                        </div>
                    </div>
                </form>
                <div id="search_history" class="col-sm-12"
                     style="height: 400px; margin-top: 10px; border-top: 1px solid #C5D0DC;"></div>
            </div>
            <!--台帐信息-->
            <form id="default-step-2" class="container-fluid">
                <!--电池包信息-->
                <fieldset class="col-xs-12">
                    <legend>电池包信息</legend>
                    <div th:each="accountProperty : ${accountPropertyListForPackage}" class="col-sm-4">
                        <label class="col-sm-6" th:text="${accountProperty.name}"
                               th:if="${accountProperty.propertyType != 5}" th:id="${accountProperty.id}"></label>
                        <label class="col-sm-6" th:text="${accountProperty.name}"
                               th:if="${accountProperty.propertyType == 5}"
                               th:id="${'file' + accountProperty.id}"></label>
                        <!-- 整型 -->
                        <input class="col-sm-6" type="number" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 1}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 浮点 -->
                        <input class="col-sm-6" type="number" step="0.01" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value==null?'':accountProperty.value}"
                               th:if="${accountProperty.propertyType == 2}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 字符 -->
                        <input class="col-sm-6" type="text" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 3}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 日期 -->
                        <input class="col-sm-6" type="date" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 4}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 图片 -->
                        <input class="col-sm-6" type="file" th:name="${accountProperty.id}" multiple="multiple"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 5}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                    </div>
                </fieldset>
                <!--BMS信息-->
                <fieldset class="col-xs-12">
                    <legend>BMS信息</legend>
                    <div th:each="accountProperty : ${accountPropertyListForBMS}" class="col-sm-6">
                        <label class="col-sm-4" th:text="${accountProperty.name}" th:id="${accountProperty.id}"></label>
                        <!-- 整型 -->
                        <input class="col-sm-8" type="number" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 1}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 浮点 -->
                        <input class="col-sm-8" type="number" step="0.01" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value==null?'':accountProperty.value}"
                               th:if="${accountProperty.propertyType == 2}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 字符 -->
                        <input class="col-sm-8" type="text" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 3}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 日期 -->
                        <input class="col-sm-8" type="date" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 4}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value!= null}">
                        <!-- 图片 -->
                        <input class="col-sm-8" type="file" th:name="${accountProperty.id}"
                               th:value="${accountProperty.value}" th:if="${accountProperty.propertyType == 5}"
                               th:readonly="${accountProperty.isModify == 0 && accountProperty.value != null}">
                    </div>
                </fieldset>
                <!--提交按钮-->
                <div class="col-xs-12" style="text-align: center; margin-top: 10px;">
                    <button type="button" class="btn btn-primary btn-sm" id="save_change"
                            onclick="save_StadningBookInfo()">提交
                    </button>
                </div>
                <script>
                    function save_StadningBookInfo() {
                        var field = "";
                        var formData = new FormData();
                        var list = [];
                        $("#default-step-2 label").each(function (i, v) {
                            var id = $(this).attr("id");
                            if (id.indexOf("file") != -1) {
                                var file = $(v).next().get(0).files[0];
                                if (file) {
                                    formData.append("file", file);
                                    formData.append("file_id", id);
                                }
                            } else {
                                var value = $(this).next().val();
                                var data = {id: id, value: value};
                                list.push(data);
                            }
                        });
                        var data = JSON.stringify(list);
                        formData.append("data", data);
                        formData.append("id", $("#id").val());
                        $.ajax({
                            url: '/monitor/save_stadning_book_info',
                            type: "post",
                            data: formData,
                            contentType: false, //必须
                            cache: false,//上传文件无需缓存
                            processData: false,//用于对data参数进行序列化处理 这里必须false
                            dataType: 'json',
                            success: function (data) {
                                alert(data['message']);
                                if (data['status'] == 1) {
                                    $("#default-step-2").find("input").removeClass("change");
                                    $("#save_change").hide();
                                }
                            }
                        });
                    }
                </script>
            </form>
            <!--诊断分析-->
            <form id="default-step-3" class="container-fluid">
                <!--总电量-->
                <fieldset class="col-sm-10" style="margin-right: 10px">
                    <legend>总电量</legend>
                    <div class="col-sm-12">
                        <span class="col-sm-4">
                            <span class="col-sm-8 value" style="text-align: center" th:text="${zdl.value}"></span>kWh
                        </span>
                        <i class="glyphicon glyphicon-arrow-down" th:if="${zdl.change_value.startsWith('-')}"
                           style="color: green; float: left"></i>
                        <i class="glyphicon glyphicon-arrow-up" th:unless="${zdl.change_value.startsWith('-')}"
                           style="color: red; float: left"></i>
                        <span class="col-sm-4">
                            <span class="col-sm-8 change_value" style="text-align: center"
                                  th:text="${zdl.change_value.replace('-', '')}"></span>kWh
                        </span>
                    </div>
                    <!--提示
                    <div class="col-sm-12 prompt" style="color: red">
                        <span class="col-sm-12">
                            更新时间：
                            <span class="time_value" th:text="${#dates.format(zdl.date,'yyyy-MM-dd HH:mm:ss')}"></span>
                            诊断类型：
                            <span>就地推送</span>
                        </span>
                    </div>-->
                    <!--单体容量变化量-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">单体容量变化量</label>
                        <span th:text="${jsonObject.dtrlbhl}"></span>
                    </div>
                    <!--瞬态放电电流-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">瞬态放电电流</label>
                        <span th:text="${jsonObject.stfddl}"></span>
                    </div>
                    <!--最大允许充电电流-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">最大允许充电电流</label>
                        <span th:text="${jsonObject.zdyxcddl}"></span>
                    </div>
                    <!--瞬态充电电流-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">瞬态充电电流</label>
                        <span th:text="${jsonObject.stcddl}"></span>
                    </div>
                    <!--充电电流请求值-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">充电电流请求值</label>
                        <span th:text="${jsonObject.cddlqqz}"></span>
                    </div>
                    <!--稳态放电电流-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">稳态放电电流</label>
                        <span th:text="${jsonObject.wtfddl}"></span>
                    </div>
                    <!--这个仅仅是用来让显示更加工整的-->
                    <div class="col-sm-6"></div>
                    <!--稳态充电电流-->
                    <div class="col-sm-6">
                        <label class="col-sm-6">稳态充电电流</label>
                        <span th:text="${jsonObject.wtcddl}"></span>
                    </div>
                </fieldset>
                <!--总容量-->
                <fieldset>
                    <legend>总容量</legend>
                    <div class="col-sm-12">
                        <p>
                            <span class="value" th:text="${zrl.value}">6512.21</span>Ah
                        </p>
                        <p>
                            <i class="glyphicon glyphicon-arrow-down" th:if="${zdl.change_value.startsWith('-')}"
                               style="color: green; float: left"></i>
                            <i class="glyphicon glyphicon-arrow-up" th:unless="${zdl.change_value.startsWith('-')}"
                               style="color: red; float: left"></i>
                            <span class="change_value" th:text="${zdl.change_value.replace('-', '')}"></span>Ah
                        </p>
                    </div>
                </fieldset>
                <!--循环次数-->
                <fieldset>
                    <legend>循环次数</legend>
                    <div class="col-sm-12">
                        <p>
                            <span class="value" th:text="${xhcx.value}"></span>次
                        </p>
                        <p>
                            <i class="glyphicon glyphicon-arrow-down" th:if="${zdl.change_value.startsWith('-')}"
                               style="color: green; float: left"></i>
                            <i class="glyphicon glyphicon-arrow-up" th:unless="${zdl.change_value.startsWith('-')}"
                               style="color: red; float: left"></i>
                            <span class="change_value" th:text="${xhcx.change_value.replace('-', '')}"></span>次
                        </p>
                    </div>
                </fieldset>
                <!--柱状图-->
                <div>
                    <!--SOC校正及单体SOC分布-->
                    <fieldset style="float: left; width: 49%">
                        <legend>SOC校正及单体SOC分布</legend>
                        <!--更新时间、诊断类型-->
                        <div>
                            <span class="col-sm-11" style="color: red">
                                <!--更新时间：
                                <span class="time_value"></span>
                                诊断类型：
                                <span>就地推送</span>-->
                            </span>
                        </div>
                        <!--校正、偏差-->
                        <div>
                            <span class="col-sm-3">校正：<span class="value" th:text="${jz.value}">65.21</span>%</span>
                            <i class="glyphicon glyphicon-arrow-down" th:if="${jz.change_value.startsWith('-')}"
                               style="color: green; float: left"></i>
                            <i class="glyphicon glyphicon-arrow-up" th:unless="${jz.change_value.startsWith('-')}"
                               style="color: red; float: left"></i>
                            <span class="col-sm-2"><span class="change_value" th:text="${jz.change_value}">66</span></span>
                            <span class="col-sm-3">偏差：<span class="offset_value" th:text="${pc.value}">-22.03</span></span>
                            <i class="glyphicon glyphicon-arrow-down" th:if="${pc.change_value.startsWith('-')}"
                               style="color: green; float: left"></i>
                            <i class="glyphicon glyphicon-arrow-up" th:unless="${pc.change_value.startsWith('-')}"
                               style="color: red; float: left"></i>
                            <span class="col-sm-2"><span class="offset_change_value" th:text="${pc.change_value}">65.48</span></span>
                        </div>
                        <!--SOC图-->
                        <div id="soc_correcting" style="height:300px;margin-top: 10px"></div>
                    </fieldset>
                    <!--单体阻值分布-->
                    <fieldset style="float: right; width: 49%">
                        <legend>单体阻值分布</legend>
                        <!--更新时间、诊断类型-->
                        <div>
                            <span class="col-sm-11" style="color: red">
                                <!--更新时间：
                                <span class="time_value"
                                      th:text="${#dates.format(zdl.date,'yyyy-MM-dd HH:mm:ss')}"></span>
                                诊断类型：
                                <span>就地推送</span>-->
                            </span>
                        </div>
                        <!--SOC图-->
                        <div id="dcir_correcting" style="height:300px;margin-top: 10px"></div>
                    </fieldset>
                </div>
                <!--电池包一致性分析-->
                <fieldset class="col-sm-12">
                    <legend>电池包一致性分析</legend>
                    <!--提示-->
                    <div class="col-sm-12" style="color: red"><!--
                        更新时间：
                        <span th:text="${#dates.format(zdl.date,'yyyy-MM-dd HH:mm:ss')}"></span>
                        诊断类型：
                        <span>就地推送</span>-->
                    </div>
                    <table class="table table-condensed table-hover col-sm-12">
                        <thead>
                        <tr>
                            <td>单体电池参数</td>
                            <td>标准差</td>
                            <td>方差</td>
                            <td>期望值</td>
                            <td>变异系数</td>
                            <td>四分位数Ql</td>
                            <td>四分位数Qm</td>
                            <td>四分位数Qu</td>
                            <td>四分位数差</td>
                            <td>一致性</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>容量(Ah)</td>
                            <td th:text="${batteryInfo.dtrlbzc}"></td>
                            <td th:text="${batteryInfo.dtrlfc}"></td>
                            <td th:text="${batteryInfo.dtrlqwz}"></td>
                            <td th:text="${batteryInfo.dtrlbyxs}"></td>
                            <td th:text="${batteryInfo.dtrlsfwsql}"></td>
                            <td th:text="${batteryInfo.dtrlsfwsqm}"></td>
                            <td th:text="${batteryInfo.dtrlsfwsqu}"></td>
                            <td th:text="${batteryInfo.dtrlsfwsc}"></td>
                            <td th:text="${batteryInfo.dtrlyzx}"></td>
                        </tr>
                        <tr>
                            <td>SOC</td>
                            <td th:text="${batteryInfo.dtsocbzc}"></td>
                            <td th:text="${batteryInfo.dtsocfc}"></td>
                            <td th:text="${batteryInfo.dtsocqwz}"></td>
                            <td th:text="${batteryInfo.dtsocbyxs}"></td>
                            <td th:text="${batteryInfo.dtsocsfwsql}"></td>
                            <td th:text="${batteryInfo.dtsocsfwsqm}"></td>
                            <td th:text="${batteryInfo.dtsocsfwsqu}"></td>
                            <td th:text="${batteryInfo.dtsocsfwsc}"></td>
                            <td th:text="${batteryInfo.dtsocyzx}"></td>
                        </tr>
                        <tr>
                            <td>DCIR(mΩ)</td>
                            <td th:text="${batteryInfo.dtzzbzc}"></td>
                            <td th:text="${batteryInfo.dtzzfc}"></td>
                            <td th:text="${batteryInfo.dtzzqwz}"></td>
                            <td th:text="${batteryInfo.dtzzbyxs}"></td>
                            <td th:text="${batteryInfo.dtzzsfwsql}"></td>
                            <td th:text="${batteryInfo.dtzzsfwsqm}"></td>
                            <td th:text="${batteryInfo.dtzzsfwsqu}"></td>
                            <td th:text="${batteryInfo.dtzzsfwsc}"></td>
                            <td th:text="${batteryInfo.dtzzyzx}"></td>
                        </tr>
                        <tr>
                            <td>电压(mV)</td>
                            <td th:text="${batteryInfo.dtdybzc}"></td>
                            <td th:text="${batteryInfo.dtdyfc}"></td>
                            <td th:text="${batteryInfo.dtdyqwz}"></td>
                            <td th:text="${batteryInfo.dtdybyxs}"></td>
                            <td th:text="${batteryInfo.dtdysfwsql}"></td>
                            <td th:text="${batteryInfo.dtdysfwsqm}"></td>
                            <td th:text="${batteryInfo.dtdysfwsqu}"></td>
                            <td th:text="${batteryInfo.dtdysfwsc}"></td>
                            <td th:text="${batteryInfo.dtdyyzx}"></td>
                        </tr>
                        <tr>
                            <td>温度(℃)</td>
                            <td th:text="${batteryInfo.wdbzc}"></td>
                            <td th:text="${batteryInfo.wdfc}"></td>
                            <td th:text="${batteryInfo.wdqwz}"></td>
                            <td th:text="${batteryInfo.wdbyxs}"></td>
                            <td th:text="${batteryInfo.wdsfwsql}"></td>
                            <td th:text="${batteryInfo.wdsfwsqm}"></td>
                            <td th:text="${batteryInfo.wdsfwsqu}"></td>
                            <td th:text="${batteryInfo.wdsfwsc}"></td>
                            <td th:text="${batteryInfo.wdyzx}"></td>
                        </tr>
                        </tbody>
                    </table>
                </fieldset>
            </form>
        </div>
        <hr style="border:0"/>
    </div>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var equipmentManageList = /*[[${equipmentManageList}]]*/;
        show_package_info(equipmentManageList);

        /**
         * 实时监控 模组监控 柱状图
         */
        function show_package_info(mapData) {
            var package_info = echarts.init(document.getElementById('package_info'));
            var xAxis = mapData.map(function (item) {
                return item["name"];
            });
            var yAxis1 = mapData.map(function (item) {
                return item["minVolt"];
            });
            var maxVolt = mapData.map(function (item) {
                return item["maxVolt"];
            });
            var yAxis2 = mapData.map(function (item) {
                return (item["maxVolt"] - item["minVolt"]).toFixed(2);
            });
            var yAxis3 = mapData.map(function (item) {
                return item["minTemp"];
            });
            var maxTemp = mapData.map(function (item) {
                return item["maxTemp"];
            });
            var yAxis4 = mapData.map(function (item) {
                return (item["maxTemp"] - item["minTemp"]).toFixed(2);
            });

            package_info.setOption({
                title: {                // 标题
                    left: 'center',
                    text: '电压 今日极值/极差曲线'
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        if (params.length === 2) {
                            var value1 = Number(params[0].value) + Number(params[1].value);
                            var str = params[0].name + "<br>";
                            str += params[0].seriesName + ":&nbsp;" + params[0].value + "<br>";
                            str += "单体电压最高(V):&nbsp;" + value1.toFixed(2) + "<br>";
                            str += params[1].seriesName + ":&nbsp;" + params[1].value + "<br>";
                            /**
                             var value2 = Number(params[2].value) + Number(params[3].value);
                             str += params[2].seriesName + ":&nbsp;" + params[2].value + "<br>";
                             str += "单体温度最高(℃):&nbsp;" + value2.toFixed(2) + "<br>";
                             str += params[3].seriesName + ":&nbsp;" + params[3].value + "<br>";
                             **/
                            return str;
                        }
                    }
                },
                legend: {               // 图例  去掉,'单体温度最低(℃)', '单体温度极差(℃)'
                    data: ['单体电压最低(V)', '单体电压极差(V)'],
                    x: 'center',        //中间
                    y: '10%'           //下方
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis
                    }
                ],
                yAxis: [
                    {
                        splitLine: {    //不显示坐标辅助线
                            show: false
                        },
                        name: '电压',
                        type: 'value',
                        //min:0,
                        axisLabel: {
                            formatter: '{value} V'
                        }
                    }
                ],
                series: [
                    {
                        name: '单体电压最低(V)',
                        type: 'bar',
                        stack: '电压',
                        color: '#F7E2A6',
                        barMaxWidth: 30,//最大宽度
                        data: yAxis1
                    },
                    {
                        name: '单体电压极差(V)',
                        type: 'bar',
                        stack: '电压',
                        barMaxWidth: 30,//最大宽度
                        data: yAxis2
                    }
                    /** 去掉温度
                     ,
                     {
                         name: '单体温度最低(℃)',
                         type: 'bar',
                         stack: '温度',
                         yAxisIndex: 1,
                         color: '#DAF7A6',
                         barMaxWidth: 30,//最大宽度
                         data: yAxis3
                     },
                     {
                         name: '单体温度极差(℃)',
                         type: 'bar',
                         stack: '温度',
                         yAxisIndex: 1,
                         barMaxWidth: 30,//最大宽度
                         data: yAxis4
                     }**/
                ]
            });

            $(window).on("package_info_resize", function() {
                //重置容器高宽
                package_info.resize();
            });
        }

        /*]]>*/
    </script>
</div>
</body>
</html>